<template>
	<view class="Global">
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
		<!-- 	<view class="personnel" :style="{'height':tarbarHeight+'px'}">
			<image @click="backOnClick" src="../../../static/left_arrow.png" class="backImg" mode=""></image>
			<text class="title">{{personnelInfo}}</text>
		</view>
 -->

		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>



		<!-- 提示信息 -->
		<view class="tipsInfo">
			<text class="tipsInfoStyle"></text>
			<text class="updateInfoStyle" @click="loadData">{{updateInfo}}</text>
		</view>


		<scroll-view scroll-y="true" class="titleStyleTitle" @scrolltolower="scrolltolowerClick">
			<view class="titleStyleTitle">

				<m-tree class="mTree" ref="mtree" :defaultProps="defaultProps" :data="dataList" :divider="divider"
					:edit="edit" @add-item="addNode" @edit-item="editNode" @delete-item="deleteNode" :unfold="false"
					@node-click="nodeClick" @up-item="upNode" @down-item="downNode" @finger-action="fingerAction"
					@long-press="longpressNode"></m-tree>


			</view>
		</scroll-view>




		<view class="loginContent">

			<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
		</view>



		<!-- 点击列表弹出-->
		<uni-popup ref="popupBag" type="bottom">
			<view class="bagDetail">

				<view>
					<text class="bagDetailTitle">新增一级部门</text>
				</view>
				<view class="bagDetailConent">
					<view class="bagDetailConentFirst">
						<text class="bagDetailConentFirstText">上级部门</text>
						<text class="bagDetailConentFirstText">无</text>
					</view>
					<view class="lineBg1"></view>
					<view class="bagDetailConentFirst">
						<text class="bagDetailConentFirstText">编号*</text>

						<input @input="onInputAccount" class="bagDetailConentFirstInput" type="text" value=""
							placeholder-class="title3" placeholder="请输入" />

					</view>
					<view class="lineBg1"></view>
					<view class="bagDetailConentFirst">
						<text class="bagDetailConentFirstText">名称*</text>

						<input @input="onInputPass" class="bagDetailConentFirstInput" type="text" value=""
							placeholder-class="title3" placeholder="请输入" />
					</view>
				</view>
				<view class="bagDetailConentBtn" @click="addFirstDepartmen()">

					<text class="bagDetailConentText">确定</text>
				</view>

			</view>
		</uni-popup>



		<!-- 点击列表弹出  新增子部门-->
		<uni-popup ref="popupdepartmen" type="bottom">
			<view class="bagDetail">

				<view>
					<text class="bagDetailTitle">新增子部门</text>
				</view>
				<view class="bagDetailConent">
					<view class="bagDetailConentFirst">
						<text class="bagDetailConentFirstText">上级部门</text>
						<input class="bagDetailConentFirstInput" type="text" :value="listItemData.label" />
					</view>
					<view class="lineBg1"></view>
					<view class="bagDetailConentFirst">
						<text class="bagDetailConentFirstText">编号*</text>
						<input @input="onInputAccountDepartmen" class="bagDetailConentFirstInput" type="text" value=""
							placeholder-class="title3" placeholder="请输入" />
					</view>
					<view class="lineBg1"></view>
					<view class="bagDetailConentFirst">
						<text class="bagDetailConentFirstText">名称*</text>
						<input @input="onInputPassDepartmen" class="bagDetailConentFirstInput" type="text" value=""
							placeholder-class="title3" placeholder="请输入" />
					</view>
				</view>
				<view class="bagDetailConentBtn" @click="addChildDepartmen()">

					<text class="bagDetailConentText">确定</text>
				</view>

			</view>
		</uni-popup>



	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'

	import {

		getDeptManager,
		deleteDeptManager,
		addDeptManager

	} from '@/pages/api/api.js'

	export default {
		components: {
			MyNav,
			bgImage

		},
		data() {
			return {
				title: '部门管理',
				isback: true,
				personnelInfo: '部门管理',
				tops: 0,
				height: 0,
				tarbarHeight: 0,
				login: '新增一级部门',
				updateInfo: '刷新',
				dataList: [],


				/*
				               tree 数据
				               */
				defaultProps: {
					id: 'id', // 此项为id项的key
					children: 'children', // 此项为修改子集数据的key
					label: 'label' // 此项为修改显示数据的key
				},
				divider: true,
				edit: true,






				//总页数
				totalPage: 0,

				// 列表数据
				listSizeData: [],

				sizeManagerData: {
					storeId: '',
					tenantId: '',
					pageNum: '1', // 当前页
					pageSize: '10', //页码大小
				},



				// 新增一级部门
				firstDepartmen: {
					"parentId": '',
					"parentName": '',
					"orderNum": 1,
					"leader": "",
					"phone": "",
					"email": "",
					"status": "0",
					"storeId": '',
					"tenantId": ''
				},


				// 临时数据
				listItemData: {

				}

			}
		},
		onLoad() {
			this.loadData()
		},
    onShow() {
      // 如果是提交状态返回isRefresh=1，才刷新页面，从详情过来无需刷新
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      if (currPage.__data__.isRefresh) {
        // 重新获取数据
        console.log('获取数据');

        this.reUpload()
        // 每一次需要清除，否则会参数会缓存
        currPage.__data__.isRefresh = false
      }
    },
		methods: {
      reUpload() {
        // 重置数据
        this.dataList = []
        // 表示自动刷新本页
        this.loadData()
      },
			longpressNode(){

			},
			fingerAction(){

			},
			downNode(){

			},
			upNode(){

			},
			nodeClick(){

			},

			//节点更新按钮点击事件
			editNode(e) {
				//e.pNodeData, e.editContent
				console.log('点击的项目add', JSON.stringify(e));
				this.updateData()


			},
			//节点新增按钮点击事件
			addNode(e) {
				//e.pNodeData, e.addContent
				console.log('点击的项目add', JSON.stringify(e));
				this.openDepartmen(e)
				// this.addChildDepartmen(e.id)



			},

			//遍历id节点并删除
			removeNodeData(datas, id) { //遍历树  获取id数组
				for (var i in datas) {
					if (id === datas[i].id) {
						// datas.push(datas[i]);
						console.log('1要删除项目：', datas[i].id);
						datas.splice(i, 1);
						break;
					} else {
						if (datas[i].children) { //存在子节点就递归
							this.removeNodeData(datas[i].children, id);
							console.log('2要删除项目：', datas[i].id);
						}
					}
				}
			},
			//节点删除按钮点击事件
			deleteNode(e) {
				console.log('点击的项目delete', JSON.stringify(e));
				this.deleteDepartmen(e.id)
				// 根据自身需求，自行修改数据删除方法；
				/* if (this.removeNodeData(this.tree, e.id)) {
					// 可以配合异步请求 执行服务器删除操作
					console.log('删除ID:', e, id, '数据');
				} */
			},

			//遍历id节点添加子项
			addNodeData(datas, id, nodedata) { //遍历树  获取id数组
				var addflag = false;
				if (id === 0) {
					datas.unshift(nodedata);
					addflag = true;
				} else {
					for (var i in datas) {
						console.log(JSON.stringify(datas[i]));
						if (id === datas[i].id) {
							// datas.push(datas[i]);
							console.log('要增加项目：', datas[i].id, nodedata);
							datas[i].children.unshift(nodedata);
							addflag = true;
							break;
						} else {
							if (datas[i].children) { //存在子节点就递归
								this.addNodeData(datas[i].children, id, nodedata);
							}
						}
					}
				}
				return addflag;
			},


			// 获取子部门编号输入框的值
			onInputAccountDepartmen(e) {
				this.firstDepartmen.deptId = e.detail.value
			},
			// 获取子部门名称框输入的值
			onInputPassDepartmen(e) {
				this.firstDepartmen.deptName = e.detail.value
			},
			// 新增子部门
			addChildDepartmen() {


				// 自带上级部门id
				this.firstDepartmen.parentId = this.listItemData.id



				this.addFirstDepartmen()
				console.log('新增子部门', this.firstDepartmen, this.listItemData.id);

			},

			// 获取一级部门编号输入框的值
			onInputAccount(e) {
				this.firstDepartmen.parentId = e.detail.value
			},
			// 获取一级部门名称框输入的值
			onInputPass(e) {
				this.firstDepartmen.deptName = e.detail.value
			},

			// 新增一级部门/或子部门
			addFirstDepartmen() {
				const app = getApp();
				this.firstDepartmen.storeId = app.globalData.storeId
				this.firstDepartmen.tenantId = app.globalData.tenantId


				addDeptManager(this.firstDepartmen).then((res) => {
					// console.log('11获取数据成功', res);
					if (res.msg != null) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});


					}

					if (res.code == 200) {
						this.close()
						this.closeDepartmen()

						this.addNodeData(this.dataList, this.firstDepartmen.deptId, this.firstDepartmen)
					}






				}).catch((err) => {
					// console.error('11获取数据失败', err);
				});



			},
			// 删除部门
			deleteDepartmen(id) {



				deleteDeptManager(id).then((res) => {
					// console.log('11获取数据成功', res);
					if (res.msg != null) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						// 刷新数据
						this.dataList = []
						this.loadData()
					}




				}).catch((err) => {
					// console.error('11获取数据失败', err);
				});
			},

			// 加载数据
			loadData() {

				const app = getApp();
				this.sizeManagerData.storeId = app.globalData.storeId
				this.sizeManagerData.tenantId = app.globalData.tenantId

				// 重置
				this.sizeManagerData.pageNum = 1;

				getDeptManager(this.sizeManagerData).then((res) => {
					// console.log('11获取数据成功', res);


					if (res.code == 200) {

						// this.listSizeData = this.listSizeData.concat(res.rows)
						this.dataList = [...this.dataList, ...res.data]

						//获取数据的时候foreach循环一下，添加show=false
						// this.dataList.forEach((item, index) => {
						// 	this.$set(item, 'firstShow', false)

						// 	/* item.children.forEach((child,Index)=>{

						// 		this.$set(child, 'secondShow', false)

						// 	}); */

						// })


					}

				}).catch((err) => {
					// console.error('11获取数据失败', err);
				});
			},
			// 新增子部门
			addDepartmen(e) {
				this.openDepartmen(e)
			},


			// 修改数据
			updateData() {
				uni.navigateTo({
					url: '/subPack/departmentManagement/departmenManagerUpdate/departmenManagerUpdate',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			// 新增数据
			AddData() {
				console.log('新增数据');
				this.open()
			},

			// 打开弹框
			open(e) {
				console.log('点了');
				this.$refs.popupBag.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e


			},
			// 关闭弹框
			close() {
				this.$refs.popupBag.close()
			},


			// 打开弹框
			openDepartmen(e) {
				this.$refs.popupdepartmen.open('bottom')
				console.log('列表点击事件', e);
				this.listItemData = e

				console.log('1点了', this.listItemData);






			},
			// 关闭弹框
			closeDepartmen() {
				this.$refs.popupdepartmen.close()
			},

			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			},

			// //  第一级折叠
			// showMore(e, index) {


			// 	this.dataList[index].firstShow = !this.dataList[index].firstShow


			// 	this.dataList.forEach((item, index1) => { //js遍历数组

			// 		item.children.forEach((second, secondIndex) => {
			// 			// 只折叠对应项

			// 			if (index == index1) {
			// 				this.dataList[index].children[secondIndex].secondShow = false
			// 			}


			// 		});


			// 	});



			// 	/*
			// 					// 先展开500毫秒后再显示文字,收缩200毫秒后再隐藏文字
			// 					if (this.isShowText) {
			// 						setTimeout(() => {
			// 							// this.dataList[index].firstShow= !this.dataList[index].firstShow
			// 						}, 100)
			// 					} else {
			// 						setTimeout(() => {
			// 							// this.dataList[index].firstShow= !this.dataList[index].firstShow
			// 						}, 100)
			// 					} */

			// },
			// // 第二级折叠
			// secondShowMore(index, secondIndex) {
			// 	this.dataList[index].children[secondIndex].secondShow = !this.dataList[index].children[
			// 		secondIndex].secondShow
			// 	console.log('点击二级', this.dataList[index].children[secondIndex].secondShow);

			// }



		},

		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})

		}
	}
</script>

<style>
	.lineBg1 {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;
	}

	.bagDetailConent {
		display: flex;
		flex-direction: column;
		align-items: center;

		width: 690rpx;
		height: 360rpx;
		background: #F5F7F9;
		border-radius: 30rpx;
	}


	.bagDetailConentBtn {
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-top: 30rpx;

		display: flex;
		justify-content: center;
		align-items: center;

	}

	.bagDetailConentText {

		width: 55rpx;
		height: 26rpx;
		font-family: HarmonyOS Sans SC;
		text-align: center;
		font-weight: 600;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 30rpx;
	}


	.bagDetailConentFirstInput {
		width: 150rpx;
		height: 100%;

		text-align: right;
		padding-right: 20rpx;

		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
	}

	.bagDetailConentFirstText {


		font-family: HarmonyOS Sans SC;
		font-weight: 600;
		font-size: 28rpx;
		color: #333333;
		line-height: 120rpx;
		margin-left: 10rpx;
		padding-right: 20rpx;
		text-align: right;
	}

	.bagDetailConentFirst {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 33.3%;
		width: 100%;
	}

	.bagDetailTitle {
		width: 212rpx;
		height: 34rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 36rpx;
		color: #333333;
		line-height: 120rpx;
	}

	.bagDetail {
		width: 750rpx;
		height: 653rpx;
		background: #FFFFFF;
		border-radius: 55rpx 55rpx 0rpx 0rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;


	}




	.tipsInfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-top: 40rpx;
	}

	.tipsInfoStyle {
		font-size: 24rpx;
		color: #FF4E00;
		line-height: 80rpx;
		text-align: justifyLeft;
		font-style: normal;
		text-transform: none;
		margin-left: 30rpx;
	}

	.updateInfoStyle {

		margin-right: 30rpx;
		font-size: 24rpx;
		align-items: center;
		color: white;
		display: flex;
		justify-content: center;

		width: 100rpx;
		height: 50rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 16rpx;

	}


	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;

		position: absolute;
		bottom: 10rpx;


	}

	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 550rpx;
		height: 110rpx;

		border-radius: 30rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;

		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);

	}



	.secondContentRight {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.secondContentLeft {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding-left: 50rpx;
	}


	.firstContentRightBox {
		width: 50rpx;
		height: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.firstContentRightImg {

		width: 30rpx;
		height: 30rpx;



	}

	.firstContentRightImgArrow {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.firstContentRight {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.firstContentLeft {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.firstContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;


	}


	.thirdContentInner {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;
		padding-left: 120rpx;

	}

	.thirdContentOut {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.thirdContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.secondContentInnerOut {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
	}

	.secondContentInner {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100rpx;



	}

	.secondContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;

	}

	.mTree {
		margin-top: 30rpx;
		width: 100%;
		height: 100%;
		margin-bottom: 30rpx;
	}

	.titleStyleTitle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background: #FFFFFF;
		width: 750rpx;
		height: 560rpx;
		/*background: #EEEEEE;*/
		border-radius: 0rpx 0rpx 30rpx 30rpx;

	}

	.listContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
	}

	/* 点击更多的样式 */
	.show-more {
		width: 100%;
		height: 2rpx;
		background-color: #4CD964;
		transition: height 1s;
		-moz-transition: height 1s;
		/* Firefox 4 */
		-webkit-transition: height 1s;
		/* Safari and Chrome */
		-o-transition: height 1s;
		/* Opera */
	}

	.show-more-click {
		height: auto;
	}




	.content {
		display: flex;
		justify-content: center;
		flex-direction: column;
		width: 100%;
	}



	.firstUniCollapse {
		display: flex;
		flex-direction: column;
		justify-content: center|left;
		height: 80rpx;
		width: 100%;

	}

	.firstCollapse {
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: aquamarine;
		margin-top: 2rpx;
		height: 100%;
		width: 100%;
	}
</style>
